<template>
  <div class="order-list-wrapper">
    <el-tabs type="card" class="diagram-content_tab" v-model="activeTab" @tab-click="searchFun">
      <el-tab-pane v-for="(tab,index) in tabs" :key="index"
                   :label="tab.label"
                   :name="tab.name">
      </el-tab-pane>
    </el-tabs>
    <Table :columns="columns" :tableData="tableData"></Table>
    <Pagination :total="total"
                :pageSize.sync="pageSize"
                :current.sync="pageNum" @getList="getTable">
    </Pagination>
  </div>
</template>

<script lang="ts">
import {mixins} from "vue-class-component";
import {column} from "@/common/interface";
import Page from "@/common/mixins";
import {Component} from "vue-property-decorator";

@Component({
  name:'OrderList'
})
export default class extends mixins(Page){
  private tabs = [
    {label:'全部',name:'all'},
    {label:'待支付',name:'tobepaied'},
    {label:'已支付',name:'paied'},
    {label:'已完成',name:'complete'},
  ]
  private activeTab = 'all'
  private columns:Array<column> = [
    {label: '订单号',key: 'orderNo'},
    {label: '物流状态',key: 'statusName'},
    {label: '目的地',key: 'size'},
    {label: '下单日期',key: 'ratio'},
  ]
  private tableData:Array<any> = []

  created(){
    // this.getTable();
  }

  // 获取列表数据
  getTable():void{
    const param = {
      type:this.activeTab
    }
    this.$api.order.orderListApi(param).then(({data})=>{
      this.tableData = data.list
      this.total = data.total
    })
  }

  searchFun():void{
    this.pageNum = 1;
    this.pageSize = 10;
    // this.getTable();
  }
}
</script>

<style lang="scss" scoped>

</style>